import React, { useState } from 'react';
import { Modal, Form, Input, Button, Steps } from 'antd';
import images4 from '../assets/images/icon.png'
import '../assets/css/Xinjianlouyu.css';
// 自定义进度条样式
const CustomStep = (props) => {
  return (
    <span {...props}>
      {/* 使用自定义的圆点 */}
      <span className={`ant-steps-item-icon ${props.className}`} />
      {/* 显示文本 */}
      <span className="ant-steps-item-title">{props.title}</span>
    </span>
  );
};

const Xinjianlouyu = ({ visible, onCancel, onOk }) => {
  const [form] = Form.useForm();
  const [current, setCurrent] = useState(0);

  const handleNext = () => {
    form.validateFields().then(values => {
      // 这里可以发送新建楼宇的数据到服务器
      console.log('新建楼宇信息:', values);
      setCurrent(current + 1);
    }).catch(info => {
      console.log('验证失败:', info);
    });
  };

  const handlePrev = () => {
    setCurrent(current - 1);
  };

  return (
    <Modal
      title="新建楼宇"
      visible={visible}
      footer={null} // 移除默认的 OK 和 Cancel 按钮
      onCancel={onCancel}
    >
      <Steps current={current} size="small" labelPlacement="vertical">
        <Steps.Step component={<CustomStep />} title="基础信息" />
        <Steps.Step component={<CustomStep />} title="楼宇图片" />
        <Steps.Step component={<CustomStep />} title="楼层" />
      </Steps>

      <Form form={form} layout="vertical">
        {current === 0 && (
          <>
            <Form.Item
              label="楼宇名称"
              name="name"
              rules={[{ required: true, message: '请输入楼宇名称!' }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item
              label="详细地址"
              name="address"
              rules={[{ required: true, message: '请输入详细地址!' }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item className="no-icon-textarea" label="楼宇简介" name="description">
              <Input.TextArea rows={4} />
            </Form.Item>
            <Form.Item className="no-icon-textarea" label="运营方简介" name="operatorDescription">
              <Input.TextArea rows={4} />
            </Form.Item>
          </>
        )}

        {current === 1 && (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            <div className='mloutuzi'>
            <img className='mjinggao' style={{margin:'20px 10px -10px 0 '}} src={images4} alt="" />最多可上传9张,支持jpg,png,jpeg格式,单张不超过2M</div>
          </div>
        )}

        {current === 2 && (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            <p>暂无楼层信息</p>
          </div>
        )}
      </Form>

      <Form.Item>
        {current > 0 && (
          <Button onClick={handlePrev} style={{ marginRight: 8 }}>
            上一步
          </Button>
        )}
        <Button type="primary" htmlType="submit" block onClick={handleNext}>
          {current < 2 ? '下一步' : '完成'}
        </Button>
      </Form.Item>
    </Modal>
  );
};

export default Xinjianlouyu;